<template>
  <f-table-plan ref="groupRef" class="h400" v-bind="options"></f-table-plan>
  <f-table-plan ref="repeatRef" class="h400" v-bind="options2"></f-table-plan>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useMergeCells, useMergeCellsByGroupData } from '../../packages/hooks/useSpan';
const groupRef = ref();
const repeatRef = ref();
const columns = [
  { title: 'a', field: 'a.code' },
  { title: 'b', field: 'b' },
  { title: 'c', field: 'c' },
  { title: 'd', field: 'd' },
  { title: 'e', field: 'e' },
  { title: 'f', field: 'f' },
  { title: 'g', field: 'g' },
  { title: 'h', field: 'h' }
];

const data = [
  {
    group: '1',
    subGroup: '2',
    childGroup: '1',
    a: { code: '1' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '1',
    subGroup: '2',
    childGroup: '1',
    a: { code: '1' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '1',
    subGroup: '2',
    childGroup: '3',
    a: { code: '2' },
    b: '1',
    c: '2',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '2',
    subGroup: '3',
    childGroup: '4',
    a: { code: '2' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '2',
    subGroup: '3',
    childGroup: '5',
    a: { code: '2' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '3',
    subGroup: '4',
    childGroup: '6',
    a: { code: '3' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '4',
    subGroup: '5',
    childGroup: '7',
    a: { code: '3' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '5',
    subGroup: '6',
    childGroup: '8',
    a: { code: '3' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  },
  {
    group: '5',
    subGroup: '7',
    childGroup: '9',
    a: { code: '4' },
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
    h: '1'
  }
];
const groupData = [
  {
    t: 1,
    t2: 2,
    group: [
      {
        a: { code: '1', v: 2 },
        b: '1',
        c: '1',
        subGroup: [
          { d: '1', e: '1', f: '1', g: '1', h: '1' },
          { d: '2', e: '2', f: '2', g: '2', h: '2' },
          { d: '2', e: '2', f: '2', g: '2', h: '2' }
        ]
      },
      {
        a: { code: '1', v: 2 },
        b: '1',
        c: '1',
        subGroup: [
          { d: '3', e: '3', f: '3', g: '3', h: '3' },
          { d: '4', e: '4', f: '4', g: '4', h: '4' }
        ]
      },
      {
        a: { code: '3', v: 2 },
        b: '1',
        c: '1',
        subGroup: [
          { d: '5', e: '5', f: '5', g: '5', h: '5' },
          { d: '6', e: '6', f: '6', g: '6', h: '6' }
        ]
      },
      {
        a: { code: '2', v: 2 },
        b: '1',
        c: '1',
        subGroup: [
          { d: '7', e: '7', f: '7', g: '7', h: '7' },
          { d: '8', e: '8', f: '8', g: '8', h: '8' }
        ]
      },
      {
        a: { code: '2', v: 2 },
        b: '1',
        c: '1',
        subGroup: [
          { d: '9', e: '9', f: '9', g: '9', h: '9' },
          { d: '10', e: '10', f: '10', g: '10', h: '10' }
        ]
      }
    ]
  }
];

// 树形结构数据
const getData = useMergeCellsByGroupData(
  groupRef,
  () => {
    // 这里模拟api请求，返回的数据中包含data数组就可以了
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ data: groupData });
      }, 1000);
    });
  },
  ['group', 'subGroup'], // 分组字段，与后面要合并的字段一一对应
  ['a.code'], //group 对应的 合并字段集合
  ['b', 'c'] // subGroup对应的 合并字段集合
);

const options = reactive({
  query: (page, form) => getData({ ...page, ...form }),
  columns: columns,
  border: true
});
// 扁平化数据，通过对字段值相同进行合并
const getData1 = useMergeCells(
  repeatRef,
  () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ data: data });
      }, 1000);
    });
  },
  ['group', 'subGroup'], // 分组字段，与后面要合并的字段一一对应
  ['a.code'], //group 对应的 合并字段
  ['b', 'c'] // subGroup对应的 合并字段
);
const options2 = reactive({
  query: (page, form) => getData1({ ...page, ...form }),
  columns: columns,
  border: true
});
</script>
